<template>
    <div id='' class='base_house_info'>
        <div class="span">房屋基本信息：</div>
        <div class="content">
            <Checkbox :value="checkAll" :indeterminate="indeterminate" @click.prevent.native="handleCheckAll">全选</Checkbox>
            <Checkbox :value="checkReverse" @click.prevent.native="reverse">反选</Checkbox>
            <CheckboxGroup v-model="checked" @on-change="checkAllGroupChange">
                <Checkbox v-for="(item,index) in allList" :key="index" :label="item"></Checkbox>
            </CheckboxGroup>
        </div>
    </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
    name: '',
    props: [''],
    data() {
        return {
            indeterminate: false,
            checkAll: true,
            checkReverse: false,
            checked: []
        };
    },
    components: {},
    computed: {
        ...mapState('extend/houseContent', ['allList', 'checkedInfo']),
    },
    beforeMount() { },
    mounted() {
        this.checked = this.checkedInfo;
    },
    methods: {
        ...mapActions('extend/houseContent', [
            'changeChecked',
        ]),
        handleCheckAll() {
            if (this.indeterminate) {
                this.checkAll = false;
            } else {
                this.checkAll = !this.checkAll
            }
            this.indeterminate = false;
            if (this.checkAll) {
                this.checked = this.allList;
            } else {
                this.checked = [];
            }
        },
        checkAllGroupChange() {
            if (this.checked.length < this.allList.length && this.checked.length !== 0) {
                this.indeterminate = true;
                this.checkAll = false;
            } else if (this.checked.length == this.allList.length) {
                this.indeterminate = false;
                this.checkAll = true;
            } else if (this.checked.length == 0) {
                this.indeterminate = false
                this.checkAll = false
            }
        },
        reverse() {
            this.checkReverse = !this.checkReverse;
            let array = this.allList.filter(item => !this.checked.some(ele => ele == item));
            this.checked = array;
            this.checkAllGroupChange()
        }
    },
    watch: {
        checked() {
            this.changeChecked(this.checked)
        }
    }
}
</script>
<style lang='less' scoped>
@import url("../common.less");
@import url("./style/common.less");
.base_house_info {
    height: @Row-Height;
    background: #ffffff;
    border: 1px solid @Color-Border;
    display: flex;
    align-items: center;
    padding-left: @Padding-Left-Row-Content;
    margin-top: -1px;
}
.base_house_info .span {
    width: @Lable-width;
    text-align: right;
    font-size: 16px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: @Color-Content;
}
.base_house_info .content {
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: @Color-Content;
}
</style>